import React from 'react';
import {AICharacter, AIThought} from '../types';
import {Brain, Edit, User} from 'lucide-react';

interface AIThoughtsPanelProps {
    character: AICharacter;          // AI 角色信息
    thoughts: AIThought[];           // AI 当前生成的所有想法
    onCharacterChange: (character: AICharacter) => void; // 角色信息变更回调
    onEditPrompts: () => void;       // 点击“编辑提示词”按钮的回调
}

export const AIThoughtsPanel: React.FC<AIThoughtsPanelProps> = ({
                                                                    character,
                                                                    thoughts,
                                                                    onCharacterChange,
                                                                    onEditPrompts
                                                                }) => {
    // 根据想法类型返回对应的表情图标
    const getThoughtIcon = (type: AIThought['type']) => {
        switch (type) {
            case 'game_move':
                return '🎮';         // 游戏操作
            case 'score_reaction':
                return '🎯';    // 得分反应
            case 'existential':
                return '🤔';       // 存在主义/思考人生
            case 'strategy':
                return '🧠';          // 策略思考
            case 'death_reaction':
                return '💀';    // 死亡反应
            default:
                return '💭';                  // 默认想法
        }
    };

    // 根据想法强度返回对应的样式类（边框和背景色）
    const getIntensityClass = (intensity: AIThought['intensity']) => {
        switch (intensity) {
            case 'high':
                return 'border-l-red-500 bg-red-500/10';      // 高强度：红
            case 'medium':
                return 'border-l-yellow-500 bg-yellow-500/10'; // 中强度：黄
            case 'low':
                return 'border-l-blue-500 bg-blue-500/10';     // 低强度：蓝
            default:
                return 'border-l-gray-500 bg-gray-500/10';        // 默认：灰
        }
    };

    return (
        <div className="bg-gray-900 p-6 rounded-xl shadow-2xl h-full flex flex-col">
            {/* 头部区域：标题 + 编辑按钮 */}
            <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                    <Brain className="text-purple-400" size={24}/>
                    <h2 className="text-2xl font-bold text-white">AI Thoughts</h2>
                </div>
                <button
                    onClick={onEditPrompts}
                    className="flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors"
                >
                    <Edit size={16}/>
                    编辑提示词
                </button>
            </div>

            {/* 角色信息区域 */}
            <div className="bg-gray-800 p-4 rounded-lg mb-6">
                <div className="flex items-center gap-3 mb-3">
                    <User className={character.color} size={20}/>
                    <div>
                        <h3 className="text-lg font-semibold text-white">{character.name}</h3>
                        <p className="text-sm text-gray-400">年龄：{character.age}</p>
                    </div>
                </div>
                <p className="text-sm text-gray-300 mb-3">{character.personality}</p>
                <div className="flex items-center gap-2">
          <span className="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">
            {character.thinkingStyle}
          </span>
                </div>
            </div>

            {/* 想法实时流区域 */}
            <div className="flex-1 overflow-hidden">
                <h4 className="text-lg font-semibold text-white mb-4">实时想法</h4>
                <div className="space-y-3 overflow-y-auto h-full pr-2">
                    {thoughts.length === 0 ? (
                        <p className="text-gray-500 italic">AI 正在准备思考中...</p>
                    ) : (
                        thoughts.map((thought) => (
                            <div
                                key={thought.id}
                                className={`p-3 rounded-lg border-l-4 transition-all duration-300 ${
                                    getIntensityClass(thought.intensity)
                                }`}
                            >
                                <div className="flex items-start gap-2">
                                    <span className="text-lg">{getThoughtIcon(thought.type)}</span>
                                    <div className="flex-1">
                                        <p className={`text-sm ${character.color} leading-relaxed`}>
                                            {thought.content}
                                        </p>
                                        <p className="text-xs text-gray-500 mt-1">
                                            {new Date(thought.timestamp).toLocaleTimeString()}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        ))
                    )}
                </div>
            </div>
        </div>
    );
};
